<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b1 {
            display: inline-block;
            background-color: #909090;
            color: white;
            height: 30px;
            width: 100px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .b2 {
            background-color: #ff6600;
        }

        .td_class{
            width: 200px;
        }
        table input{
            border: 0;
        }
    </style>
</head>
<body>
<input id='i1' type="button" value="全选">
<input id='i2' type="button" value="反选">
<input id='i3' type="button" value="取消">
<div class="b1">进入编辑模式</div>
<table border="1" style="margin-top: 10px;">
    <thead>
    <th>选项</th>
    <th>IP</th>
    <th>端口</th>
    <th>状态</th>
    </thead>
    <tbody id="tb1">
    <tr>
        <td><input type="checkbox"></td>
        <td class="td_class" name="ip">1.1.1.1</td>
        <td class="td_class" name="port">80</td>
        <td name="status">在线</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td class="td_class" name="ip">1.1.1.2</td>
        <td class="td_class" name="port">80</td>
        <td name="status">在线</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td class="td_class" name="ip">1.1.1.3</td>
        <td class="td_class" name="port">80</td>
        <td name="status">在线</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td class="td_class" name="ip">1.1.1.4</td>
        <td class="td_class" name="port">80</td>
        <td name="status">下线</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>

    //全选
    document.getElementById('i1').onclick = function () {
        $('#tb1 :checkbox').prop('checked', true);
        if ($('.b1').hasClass('b2')) {
            console.log('是编辑模式');
            vim_exit();
            vim_in()

        } else {
            console.log('不是编辑模式')
        }

    };

    //取消
    document.getElementById('i3').onclick = function () {
        $('#tb1 :checkbox').prop('checked', false);
        if ($('.b1').hasClass('b2')) {
            vim_exit()
        }

    };

    //反选
    document.getElementById('i2').onclick = function () {
        $('#tb1 :checkbox').each(function () {
            if ($(this).prop('checked')) {
                $(this).prop('checked', false);
                console.log(this);
                if($('.b1').hasClass('b2')){
                    vim_exit();
                    vim_in()
                }

            } else {
                $(this).prop('checked', true);
                if($('.b1').hasClass('b2')){
                    vim_exit();
                    vim_in()
                }

            }
        })

    };


    //编辑模式按钮
    $('.b1').click(function () {
        if ($(this).hasClass('b2')) {
            $(this).removeClass('b2');
            $(this).text('进入编辑模式');
            console.log('这个非编辑模式');
            vim_exit()
        } else {
            $(this).addClass('b2');
            $(this).text('退出编辑模式');
            console.log('这个是编辑模式');
            vim_in()


        }
    });

    //编辑模式下单选
    $('#tb1 :checkbox').click(function () {
       if($('.b1').hasClass('b2')){
          if ($(this).prop('checked')){
              console.log('编辑模式下选中');
              console.log(this);

              $(this).parent().siblings().each(function () {
                    if ($(this).attr('name') == "ip") {
                        console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        i = "<input type=\"text\" value=" + old + ">";
                        $(this).append(i)
                    } else if ($(this).attr('name') == "port") {
                        console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        i = "<input type=\"text\" value=" + old + ">";
                        $(this).append(i)
                    } else {
                        console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        if (old == "在线") {
                            i = "<select>\n" +
                                "    <option>在线</option>\n" +
                                "    <option>下线</option>\n" +
                                "</select>"
                        } else {
                            i = "<select>\n" +
                                "    <option>下线</option>\n" +
                                "    <option>在线</option>\n" +
                                "</select>"
                        }
                        $(this).append(i)
                    }
                })

          }else {
              console.log('编辑模式下取消');
              console.log(this);
              $(this).parent().siblings().each(function () {
                  console.log(this);
                  var v = $(this).children().val();
                  $(this).children().remove();
                  $(this).text(v)
              })

          }

       }

    });

    //退出编辑模式
    function vim_exit() {
        $('#tb1 input[type="text"],select').each(function () {
            console.log(this);
            var v = $(this).val();
            var cc = $(this).parent();
            $(this).remove();
            cc.text(v)
        })
    }
    //进入编辑模式
    function vim_in() {
        $('#tb1 :checkbox').each(function () {
            if ($(this).prop('checked')) {
                $(this).parent().siblings().each(function () {
                    if ($(this).attr('name') == "ip") {
                        //console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        i = "<input type=\"text\" value=" + old + ">";
                        $(this).append(i)
                    } else if ($(this).attr('name') == "port") {
                        //console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        i = "<input type=\"text\" value=" + old + ">";
                        $(this).append(i)
                    } else {
                        //console.log($(this).text());
                        var old = $(this).text();
                        $(this).text('');
                        //i="<input type=\"text\" value=" + old + ">";
                        if (old == "在线") {
                            i = "<select>\n" +
                                "    <option>在线</option>\n" +
                                "    <option>下线</option>\n" +
                                "</select>"
                        } else {
                            i = "<select>\n" +
                                "    <option>下线</option>\n" +
                                "    <option>在线</option>\n" +
                                "</select>"
                        }
                        $(this).append(i)
                    }

                })
            }

        })
    }

</script>
</body>
</html>